<template>
  <el-container class="el-dq" style="height: 100%;width: 100px;" v-loading.fullscreen.lock="fullscreenLoading">
    <el-header style="position: fixed;z-index: 9;width: 100%">
      <h1 class="title">
                        <span style="color: #5f5b5b">
                            当前位置 ：
                        </span>
        交通数据质检
      </h1>
    </el-header>
    <el-main style="background: #F0F0F066;margin-top:45px">
      <el-row>
        <el-col :span="24">
          <el-row :gutter="10">
            <el-card style="height: 170px">
              <h1 style="font-size: 1.4em">当前任务质检</h1>
              <el-table :data="curData" stripe :height="500"

                        style="width: 100%;height: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column align="center" prop="taskName" label="任务名称" :min-width="80">
                  <span>{{ curData[0].taskName }}</span>
                </el-table-column>
                <el-table-column prop="remark" label="任务描述" :min-width="100">
                  <span>{{ curData[0].remark }}</span>
                </el-table-column>
                <el-table-column align="center" prop="userId" label="上传人" :min-width="65">
                  <span v-if="curData[0].users">{{ curData[0].users.userName }}</span>
                </el-table-column>
                <el-table-column align="center" prop="updateTime" label="数据上传时间" :min-width="150">
                  <span>{{ curData[0].updateTime }}</span>
                </el-table-column>
                <el-table-column align="center" prop="data" label="桥梁数据检查" :min-width="120">
                  <template v-if="curData[0].id" slot-scope="{row, $index}">
                    <el-button class="el-button el-button--mini el-button--success"
                               @click="to('TrafficBridgeQc')">查看
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="updateUrl" label="最新上传数据包" :min-width="160">
                  <template v-if="curData[0].id">
                    <el-button class="el-button el-button--mini el-button--primary"
                               @click="download(curData[0].updateUrl)">下载
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="State" label="数据替换" :min-width="150">
                  <template v-if="curData[0].id">
                    <el-upload
                        class="upload-file"
                        ref="upload"
                        name="uploadFile"
                        action="777"
                        drag
                        :file-list="fileList"
                        :limit="1"
                        :on-error="uploadFalse"
                        :auto-upload="true"
                        :http-request="uploadFile"
                    >
                      <div class="el-upload__text">
                        选择替换文件
                      </div>
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="" label="操作" :min-width="180">
                  <template v-if="curData[0].id">
                    <el-col :span="12">
                      <el-button class="el-button el-button--mini el-button--success"
                                 @click="opDialog1(curData[0].id)" v-if="true">
                        合格
                      </el-button>
                    </el-col>
                    <el-col :span="12">
                      <el-button class="el-button el-button--mini el-button--danger"
                                 @click="opDialog2(curData[0].id)" v-if="true">
                        不合格
                      </el-button>
                    </el-col>
                  </template>
                </el-table-column>
              </el-table>
              <el-divider></el-divider>
              <msg-dialog @yes="updateQc(6)" @no="onCancel" :dialog-visible="dialogVisible1"
                          :msg="msg"></msg-dialog>
              <msg-dialog @yes="updateQc(5)" @no="onCancel" :dialog-visible="dialogVisible2" :reason="reason"
                          v-model="reasonText"
                          :msg="msg"></msg-dialog>
            </el-card>
            <el-card>
              <h1 style="font-size: 1.4em">质检任务列表</h1>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="等待质检" name="first">
                  <qc-table @updateData="updateData" :table-data="tableData" @startQc="startQc"
                            :cur-page="curPage"></qc-table>
                </el-tab-pane>
                <el-tab-pane label="质检合格" name="second">
                  <qc-table @updateData="updateData" :table-data="tableData" @startQc="startQc"
                            :cur-page="curPage"></qc-table>
                </el-tab-pane>
                <el-tab-pane label="质检不合格" name="third">
                  <qc-table @updateData="updateData" :table-data="tableData" @startQc="startQc"
                            :cur-page="curPage"></qc-table>
                </el-tab-pane>
              </el-tabs>
              <admin-page :page-size="pageSize" ref="adminPage" @updateData="updateData"
                          :total="total" @currentChange="currentChange"/>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import QcTable from "../../../../components/admin/table/QcTable";
import MsgDialog from "../../../../components/admin/menu/MsgDialog";
import AdminPage from "../../../../components/admin/menu/AdminPage";
import qs from "qs";

export default {
  name: "DataQuality",
  components: {
    QcTable,
    MsgDialog,
    AdminPage
  },
  data() {
    return {
      fullscreenLoading: false,
      dialogVisible1: false,
      dialogVisible2: false,
      msg: '',
      activeName: 'first',
      curData: [{}],
      tableData: [],
      beginPos: '',
      curPage: 1,
      pageCount: 6,
      pageSize: 10,
      total: 0,
      state: 4,
      type: 4,
      chooseId: -1,
      fileList: [],
      userId: 1,
      reason: false,
      reasonText: ""
    }
  },
  mounted() {
    this.updateData(this.curPage, this.state);
    this.curData = this.$store.state.tCurData == undefined ? [{}] : [JSON.parse(this.$store.state.tCurData)];
  },
  methods: {
    download(url) {
      window.open(url);
    },
    uploadFile(file) {
      this.fullscreenLoading = true;
      this.userId = this.$store.state.user == undefined ? -1 : JSON.parse(this.$store.state.user).id;
      this.fileData = new FormData();
      this.fileData.append('userId', this.userId);
      this.fileData.append('taskId', this.curData[0].id);
      this.fileData.append('uploadFile', file.file);
      axios.post('/bjdzms/releaseTask/uploadTaskFile',
          this.fileData,
      ).then(res => {
        if (res.status === 200) {
          this.fullscreenLoading = false;
          this.uploadSuccess(res);
        } else {
          this.uploadFalse();
        }
      });
    },
    //文件上传成功触发
    uploadSuccess(response) {
      if (response.data.code == 0) {
        this.$refs.upload.clearFiles()
        this.updateData();
        this.$message({
          message: response.data.msg,
          type: 'success'
        });
      } else {
        this.$message({
          message: '导入失败',
          type: 'error'
        });
      }
    },
    //文件上传失败触发
    uploadFalse() {
      this.$message({
        message: '文件上传失败！',
        type: 'error'
      });
    },
    opDialog1(id) {
      this.msg = "确认此条数据合格？";
      this.dialogVisible1 = true;
      this.chooseId = id;
    },
    opDialog2(id) {
      this.msg = "数据不合格原因：";
      this.reason = true;
      this.dialogVisible2 = true;
      this.chooseId = id;
    },
    updateQc(state) {
      this.userId = this.$store.state.user == undefined ? -1 : JSON.parse(this.$store.state.user).id;
      axios.post("/bjdzms/releaseTask/upd1", qs.stringify({
     userId: this.userId,
                state: state,
                type: this.chooseId,
                reason: this.reasonText
      })).then(res => {
        if (res.data.code == 0) {
          this.curData = [{}];
          this.updateData();
          this.$store.dispatch("clearCurData");
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
        this.dialogVisible1 = false;
        this.dialogVisible2 = false;
      });
    },
    currentChange(curpage) {
      this.updateData(curpage, this.state);
    },
    handleClick(tab) {
      let state = tab.index == 0 ?
          4 : tab.index == 1 ?
              6 : tab.index == 2 ? 5 : -1;
      this.updateData(1, state);
    },
    startQc(chooseId) {
      this.chooseId = chooseId;
      axios.post("/bjdzms/releaseTask/findById",
          qs.stringify({
            'id': this.chooseId
          })).then(res => {
        this.$store.dispatch("startTQc", {
          tCurData: JSON.stringify(res.data)
        });
        this.curData = [];
        this.curData = [JSON.parse(this.$store.state.tCurData)];
      });
    },
    handleSelectionChange(val) {
      //console.log(val)
    },
    updateData(curPage, state) {
      this.pageSize = this.$refs.adminPage.pageSize;
      this.curPage = curPage === undefined ? this.curPage : curPage;
      this.state = state === undefined ? this.state : state;
      axios.get("/bjdzms/releaseTask/findAllByType",
          {
            params: {
              'page': this.curPage,
              'rows': this.pageSize,
              'type': this.type,
              'state': this.state
            }
          }).then(res => {
        this.tableData = [];
        this.tableData = res.data.rows;
        this.beginPos = res.data.beginPos;
        this.curPage = res.data.curPage;
        this.pageCount = res.data.pageCount;
        this.total = res.data.total;
      });
    },
    onCancel() {
      this.dialogVisible1 = false;
      this.dialogVisible2 = false;
      this.chooseId = -1;
    },
    to(path) {
      this.$router.push({name: path});
    }
  }
}
</script>

<style>
.el-dq .el-upload-dragger {
  width: 100px;
  height: 30px !important;
  background-color: #67C23A;
  border-radius: 3px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.el-dq .el-upload__text {
  font-size: 12px !important;
  line-height: 30px;
  color: #FFF !important;
}
</style>

<style scoped>
.el-header {
  background: #EBEBEB;
  color: #e5e9ef;
  font-size: 2em;
  line-height: 80px;
  border: 5px solid #EBEBEB;
}

.el-main {
  background: #fff;
}

.el-container {
  height: 100%;
}

.el-form-item {
  width: 610px;
}

.title {
  font-size: 14px;
  color: #97a8be;
  font-weight: 400 !important;
}
</style>
